<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>后台管理</title>
    <link rel="icon" href="${pageContext.request.contextPath}/lib/static/login/images/favicon.ico">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/lib/static/common/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/lib/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>树形菜单</legend>
        </fieldset>
    </div>
    <hr class="layui-bg-red">
</div>
    <div>
      <a class="layui-btn layui-btn-primary"  onclick="window.location.href='${pageContext.request.contextPath}/sys/menu/menu_ui_tree';">刷新</a>
      <a class="layui-btn layui-btn-primary"  onclick="add(null);">新增一行</a>
      <a class="layui-btn layui-btn-primary"  onclick="getCheckData();">获取选中行数据</a>
      <a class="layui-btn layui-btn-primary"  onclick="getCheckLength();">获取选中数目</a>
      <a class="layui-btn layui-btn-primary"  onclick="print();">打印缓存对象</a>
    </div>
<div>
    <table class="layui-hidden" id="listTable" lay-filter="listTable"></table>
</div>
<script>
    var editObj=null,ptable=null,dltable=null,tableId='listTable',layer=null;
    layui.config({
        base: '${pageContext.request.contextPath}/lib/layui/extend/'
    }).extend({
        dltable:'dltable'
    }).use(['jquery','dltable','layer'], function(){
        var $=layui.jquery;
        treeGrid = layui.treeGrid;//很重要
        layer=layui.layer;
        ptable=treeGrid.render({
            id:tableId
            ,elem: '#'+tableId
            ,idField:'id'
            ,url:'${pageContext.request.contextPath}/sys/menu/get.do'
             /*修改默认向后台传递的页码、大小参数名 @ming*/
            ,request: {
             pageName: 'pageNo' //页码的参数名称，默认：page
            ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
             }
            ,cellMinWidth: 100
            ,treeId:'id'//树形id字段名称
            ,treeUpId:'parentId'//树形父id字段名称
            ,treeShowName:'name'//以树形式显示的字段
            ,heightRemove:[".dHead",10]//不计算的高度,表格设定的是固定高度，此项不生效
            ,height:'100%'
            ,isFilter:false
            ,iconOpen:true//是否显示图标【默认显示】
            ,isOpenDefault:true//节点默认是展开还是折叠【默认展开】
            ,loading:true
            ,cols: [[
                     {type: 'checkbox', fixed: 'left'}
                     ,{field:'id',         title:'菜单ID', width:80, fixed: 'left', unresize: true}
                     ,{field:'name',       title:'菜单名称', width:120, edit: 'text'}
                     ,{field:'url',        title:'菜单URL', width:120, edit: 'text'}
                     ,{field:'type',       title:'菜单/按钮', width:80, edit: 'text'}
                     ,{field:'sort',       title:'排序',     width:80}
                     ,{field:'parentId',   title:'父菜单ID',  width:100}
                     ,{field:'permission', title:'权限',     width:120}
                     ,{field:'addTime',    title:'添加时间',   width:80}
                     ,{field:'isdel',      title:'是否删除',   width:80}
                     ,{field:'note',       title:'备注'}
                     ,{width:100,title: '操作', align:'center'/*toolbar: '#barDemo'*/
                     ,templet: function(d){
                        var html='';
                        var addBtn='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">添加</a>';
                        var delBtn='<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
                        return addBtn+delBtn;
                       }
                      }
                   ]]
            ,isPage:false
            ,parseData:function (res) {//数据加载后回调
              return res;
            }
            ,onClickRow:function(index, o) {
                console.log(index,o,"单击！");
            }
            ,onDblClickRow:function (index, o) {
                console.log(index,o,"双击");
            }
        });

        treeGrid.on('tool('+tableId+')',function (obj) {
            if(obj.event === 'del'){//删除行
                del(obj);
            }else if(obj.event==="add"){//添加行
                add(obj);
            }
        });
    });

    function del(obj) {
        layer.confirm("你确定删除数据吗？如果存在下级节点则一并删除，此操作不能撤销！", {icon: 3, title:'提示'},
            function(index){//确定回调
                var id=obj.data.id;
                var url='/sys/menu/deleteById';
                $.post(url,{id:id},function(){
                  obj.del();
                  layer.close(index);
                  return false;
                })

            },function (index) {//取消回调
                layer.close(index);
            }
        );
    }


    var i=1000000;
    //添加
    function add(pObj) {
        var pdata=pObj?pObj.data:null;
        var param={};
        param.name='水果'+Math.random();
        param.id=++i;
        param.pId=pdata?pdata.id:null;
        treeGrid.addRow(tableId,pdata?pdata[treeGrid.config.indexName]+1:0,param);
    }

    function print() {
        console.log(treeGrid.cache[tableId]);
        var loadIndex=layer.msg("对象已打印，按F12，在控制台查看！", {
            time:3000
            ,offset: 'auto'//顶部
            ,shade: 0
        });
    }

    function openorclose() {
        var map=treeGrid.getDataMap(tableId);
        var o= map['102'];
        treeGrid.treeNodeOpen(tableId,o,!o[treeGrid.config.cols.isOpen]);
    }


    function openAll() {
        var treedata=treeGrid.getDataTreeList(tableId);
        treeGrid.treeOpenAll(tableId,!treedata[0][treeGrid.config.cols.isOpen]);
    }

    function getCheckData() {
        var checkStatus = treeGrid.checkStatus(tableId)
            ,data = checkStatus.data;
        layer.alert(JSON.stringify(data));
    }
    function radioStatus() {
        var data = treeGrid.radioStatus(tableId)
        layer.alert(JSON.stringify(data));
    }
    function getCheckLength() {
        var checkStatus = treeGrid.checkStatus(tableId)
            ,data = checkStatus.data;
        layer.msg('选中了：'+ data.length + ' 个');
    }

    function reload() {
        treeGrid.reload(tableId,{
            page:{
                curr:1
            }
        });
    }
    function query() {
        treeGrid.query(tableId,{
            where:{
                name:'sdfsdfsdf'
            }
        });
    }

    function test() {
        console.log(treeGrid.cache[tableId],treeGrid.getClass(tableId));


        /*var map=treeGrid.getDataMap(tableId);
        var o= map['102'];
        o.name="更新";
        treeGrid.updateRow(tableId,o);*/
    }
</script>
<%--<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?e2af8415b6ffbaeb52de4d080cb4ba85";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>--%>
</body>
</html>